<template>
    <div class="app-container">
        <el-form
            ref="form"
            v-loading="formLoading"
            :model="form"
            :rules="rules"
            label-width="150px"
            style="width: 600px;"
        >
            <!--基本信息-->
            <p class="title">基本信息</p>
            <el-row style="margin-bottom: 40px; margin-left: 108px">
                <el-col :span="13">
                    <el-card
                        :body-style="{ padding: '0px'}"
                        style="width: 156px; height: 218.4px"
                    >
                        <img :src="imgDataUrl || form.img || 'https://sei-image-store.oss-cn-beijing.aliyuncs.com/8d788385431273d11e8b43bb78f3aa41/1f7c9d86f8093f6da3e622168f81f9f8.png'" class="image">
                    </el-card>
                </el-col>
                <el-col :span="6">
                    <el-button type="primary" icon="el-icon-upload" style="margin-top: 90px" @click="toggleShow">设置照片</el-button>
                </el-col>
                <avatar-upload
                    v-model="show"
                    field="image_upload"
                    :width="113.6"
                    :height="159"
                    :url="uploadURL"
                    :headers="headers"
                    img-format="png"
                    no-circle
                    @crop-success="cropSuccess"
                    @crop-upload-success="cropUploadSuccess"
                    @crop-upload-fail="cropUploadFail"
                />
            </el-row>
            <el-form-item label="姓名" prop="name">
                <el-input v-model="form.name" />
            </el-form-item>
            <el-form-item label="性别" prop="sex">
                <el-select v-model="form.sex" placeholder="性别">
                    <el-option label="男" :value="0" />
                    <el-option label="女" :value="1" />
                    <el-option label="保密" :value="-1" />
                </el-select>
            </el-form-item>
            <el-form-item label="学历" prop="degree">
                <el-select v-model="form.degree" placeholder="学历">
                    <el-option label="博士" value="博士学位" />
                    <el-option label="硕士" value="硕士学位" />
                    <el-option label="本科" value="学士学位" />
                </el-select>
            </el-form-item>
            <el-form-item label="职称" prop="jobTitle">
                <el-select v-model="form.jobTitle" placeholder="职称">
                    <el-option label="教授" value="教授" />
                    <el-option label="副教授" value="副教授" />
                    <el-option label="讲师" value="讲师" />
                    <el-option label="辅导员" value="辅导员" />
                </el-select>
            </el-form-item>
            <el-form-item label="职务" prop="position">
                <el-input
                    v-model="form.position"
                    maxlength="14"
                    show-word-limit
                />
            </el-form-item>
            <el-form-item label="所属机构" prop="organization">
                <el-input
                    v-model="form.organization"
                    maxlength="7"
                    show-word-limit
                />
            </el-form-item>
            <el-form-item label="联系方式" prop="contactInformation">
                <el-input v-model="form.contactInformation" />
            </el-form-item>
            <el-form-item label="联系地址" prop="location">
                <el-input
                    v-model="form.location"
                    maxlength="30"
                    show-word-limit
                />
            </el-form-item>
            <el-form-item label="研究方向" prop="direction">
                <el-input
                    v-model="form.direction"
                    type="textarea"
                    maxlength="100"
                    show-word-limit
                    :autosize="setting"
                />
            </el-form-item>

            <!--详细介绍-->
            <p class="title" style="margin-top: 40px">详细信息</p>
            <el-form-item label="个人简介" prop="introduction">
                <el-input v-model="form.introduction" type="textarea" :autosize="setting" />
            </el-form-item>
            <el-form-item label="教学工作" prop="teaching">
                <el-input v-model="form.teaching" type="textarea" :autosize="setting" />
            </el-form-item>
            <el-form-item label="科学研究" prop="scientificResearch">
                <el-input v-model="form.scientificResearch" type="textarea" :autosize="setting" />
            </el-form-item>
            <el-form-item label="发表论文" prop="paper">
                <el-input v-model="form.paper" type="textarea" :autosize="setting" />
            </el-form-item>
            <el-form-item label="奖励荣誉" prop="honour">
                <el-input v-model="form.honour" type="textarea" :autosize="setting" />
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="onSubmit">保存修改</el-button>
                <el-button @click="onCancel">返回</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import avatarUpload from 'vue-image-crop-upload'
import { getTeacherInfo, updateTeacherInfo } from '@/api/user'
import { scrollTo } from '@/utils/scroll-to'

export default {
    name: 'TeacherEdit',
    components: {
        'avatar-upload': avatarUpload
    },
    data() {
        const validateRequire = (rule, value, callback) => {
            if (value === '') {
                callback(new Error(rule.field + '为必传项'))
            } else {
                callback()
            }
        }
        return {
            formLoading: false,
            // 头像上传
            show: false,
            headers: {
                smail: '*_~'
            },
            imgDataUrl: '', // the datebase64 url of created image
            uploadURL: process.env.VUE_APP_BASE_API + '/teacher/upload',
            // 提交表单
            form: {
                id: undefined,
                img: '',
                name: '',
                sex: '',
                degree: '',
                jobTitle: '',
                position: '',
                organization: '软件工程系',
                location: '',
                direction: '',
                contactInformation: '',
                // textarea
                introduction: '',
                teaching: '',
                scientificResearch: '',
                paper: '',
                honour: ''
            },
            rules: {
                name: [{ validator: validateRequire }],
                sex: [{ validator: validateRequire }],
                degree: [{ validator: validateRequire }],
                jobTitle: [{ validator: validateRequire }],
                contactInformation: [{ validator: validateRequire }],
                direction: [{ validator: validateRequire }],
                introduction: [{ validator: validateRequire }]
            },
            // textarea 高度设置
            setting: {
                minRows: 3,
                maxRows: 8
            }
        }
    },
    computed: {
        tid() {
            return Number(this.$route.params && this.$route.params.id) ||
                this.$store.getters.id
        }
    },
    created() {
        this.fetchTeacher()
    },
    methods: {
        // 拉取信息
        fetchTeacher() {
            this.formLoading = true
            getTeacherInfo(this.tid).then(info => {
                console.log(info)
                Object.assign(this.form, info)
                setTimeout(() => {
                    this.formLoading = false
                }, 500)
            })
        },
        // 照片上传
        toggleShow() {
            this.show = !this.show
        },
        cropSuccess(imgDataUrl) {
            this.imgDataUrl = imgDataUrl // 后台展示的url
        },
        cropUploadSuccess(jsonData) {
            this.form.img = jsonData.data.image_url // 实际的阿里云OSS url
        },
        cropUploadFail() {
            this.$message.error('图片上传失败')
        },
        // 表单提交
        onSubmit() {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    if (this.form.img === '') {
                        this.$message.error('请上传个人照片')
                        return
                    }
                    if (!this.form.id) {
                        this.form.id = this.tid
                    }
                    updateTeacherInfo(this.form).then(() => {
                        this.$message.success('信息更新成功!')
                        setTimeout(() => {
                            scrollTo(0, 1000)
                        }, 800)
                    })
                } else {
                    this.$message.error('表单验证未通过!请仔细检查')
                }
            })
        },
        // 取消操作, 返回
        onCancel() {
            this.$router.push('/user/list')
        }

    }
}
</script>

<style scoped lang="scss">
.title{
    padding-left: 58px;
    margin-bottom: 30px;
}
.image {
    width: 100%;
    display: block;
}
</style>

